<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>查询功能</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
    <!--导入jquery-->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!--导入将jq对象转换为json字符串插件-->
    <script type="text/javascript" src="js/json.js"></script>
    <meta charset="utf-8">
    <!--为了兼容ie浏览器,让他尽量用高版本的浏览器-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口,是一个虚拟的窗口,使用手机,让网页在手机上能滚动-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>查询功能</p>
            <p>Query function</p>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-danger btn-default" data-toggle="modal" data-target="#myModal">
                新增用户
            </button>

            <!-- 模态框 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <!--头部-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">新增用户</h4>
                        </div>
                        <!--中间主体内容-->
                        <div class="modal-body">
                            <form action="#">
                                <div class="form-group">
                                    <label>登录名:</label><input class="form-control">
                                </div>

                                <div class="form-group">
                                    <label>性别:</label><input type="radio" name="sex"><label>&nbsp;&nbsp;男</label>&nbsp;&nbsp;&nbsp;
                                    <input type="radio" name="sex"><label>&nbsp;&nbsp;女</label>
                                </div>

                                <div class="form-group">
                                    <label for="birthday">出生日期:</label>
                                    <input type="date" class="form-control">
                                </div>

                                <div class="form-group">
                                    <label>邮政编码:</label><input class="form-control" placeholder="湛江:524000">
                                </div>

                                <div class="form-group">
                                    <label>输入密码:</label> <input class="form-control" name="password" id="pw"
                                                                type="password" class="kuang_txt possword"
                                                                placeholder="输入密码">
                                </div>
                                <div class="form-group">
                                    <label>再输入密码:</label> <input class="form-control" name="repassword" id="repw"
                                                                 type="password"
                                                                 class="kuang_txt possword" placeholder="确认密码"
                                                                 onkeyup="checkpassword()"><span
                                        id="tishi"></span></input>
                                </div>
                                <!--                                <div class="form-group">-->
                                <!--                                    <label>学历:</label>-->
                                <!--                                    <select class="form-control">-->
                                <!--                                        <option>小学</option>-->
                                <!--                                        <option>高中</option>-->
                                <!--                                        <option>天龙人</option>-->
                                <!--                                        <option>本科</option>-->
                                <!--                                        <option>博士</option>-->
                                <!--                                    </select>-->
                                <!--                                </div>-->
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="rg_form_center">
            <!--注册表单-->
            <form id="registerForm" method="post">
                <!--隐藏域-->
                <input type="hidden" name="action" value="register">

                <table style="margin-top: 25px;">
                    <tr>
                        <td class="td_left">
                            <label for="username">登录名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="username" name="username" placeholder="请输入账号">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="sex">性别</label>
                        </td>
                        <td class="td_right gender">
                            <input type="radio" id="sex" name="sex" value="男" checked> 男
                            <input type="radio" name="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="birthday">出生日期</label>
                        </td>
                        <td class="td_right">
                            <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="birthday-end">结束日期</label>
                        </td>
                        <td class="td_right">
                            <input type="date" id="birthday-end" name="birthday-end" placeholder="年/月/日"
                                   onmouseout="ckdate_date()">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left" style="">
                            <label for="status">用户状态</label>
                        </td>
                        <td class="td_left">
                            <select id="status" style="padding:4px 20px;">
                                <option value="status">启用</option>
                                <option value="status">禁用</option>
                            </select>

                        </td>
                        <!--                        <td class="td_left" style="">-->
                        <!--                            <label for="user-status">用户状态</label>-->
                        <!--                        </td>-->
                        <!--                        <td class="td_right">-->
                        <!--                            &lt;!&ndash;                            <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">&ndash;&gt;-->
                        <!--                            <select style="padding:4px 20px;">-->
                        <!--                                <option value="status">启用</option>-->
                        <!--                                <option value="status">禁用</option>-->
                        <!--                            </select>-->

                        <!--                        </td>-->
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="Province">所属省份</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="Province" name="Province" placeholder="请输入你的省份">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="Registration">注册时间</label>
                        </td>
                        <td class="td_right">
                            <input type="date" id="Registration" name="Registration" placeholder="年/月/日">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="Registration-end">结束时间</label>
                        </td>
                        <td class="td_right">
                            <input type="date" id="Registration-end" name="Registration-end" placeholder="年/月/日"
                                   onmouseout="ckdate()">
                        </td>
                    </tr>
                    <!--                    <tr>-->
                    <!--                        <td class="td_left">-->
                    <!--                            <label for="check">验证码</label>-->
                    <!--                        </td>-->
                    <!--                        <td class="td_right check">-->
                    <!--                            <input type="text" id="check" name="check" class="check">-->
                    <!--                            <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">-->
                    <!--                            <script type="text/javascript">-->
                    <!--                                //图片点击事件-->
                    <!--                                function changeCheckCode(img) {-->
                    <!--                                    img.src = "checkCode?" + new Date().getTime();-->
                    <!--                                }-->
                    <!--                            </script>-->
                    <!--                        </td>-->
                    <!--                    </tr>-->
                    <tr>
                        <td class="td_left">
                        </td>
                        <td class="td_right check">
                            <input id="registerBtn" type="button" class="submit" value="添加">
                            <span id="msg" style="color: red;"></span>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_form_right">
            <p>
                <!--                已有账号？-->
                <a href="#">关闭</a>
            </p>
        </div>
    </div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>


<script>

    // 出生开始日期必须小于结束日期
    function ckdate() {
        var startTime = $("#Registration").val();
        var endTime = $("#Registration-end").val();

        var start = new Date(startTime.replace("-", "/").replace("-", "/"));
        var end = new Date(endTime.replace("-", "/").replace("-", "/"));
        if (end < start) {
            alert('结束日期不能小于开始日期！');
            return false;
        } else {
            return true;
        }
    }

    // 1. 监听注册按钮点击
    $("#registerBtn").click(function () {
        // 2. 获得用户名
        var username = $("#username").val();
        // 3. 校验用户名是否符合规则
        // 用户名要求：6~18个长度，首字母为英文字母，其他由字母，数字，下划线组成
        // 3.1 创建正则表达式对象
        // var regex = /^[a-zA-Z]\w{5,17}$/;

        // 3.2 判断用户名是否符合规则
        if (!regex.test(username)) {
            $("#msg").html("登录名校验不通过");
            return;
        }

        // 4. 发送异步请求实现用户注册
        $.post({
            url: "user", // 请求地址
            data: $("#registerForm").serialize(), // 请求参数
            success: function (result) { // 成功回调
                // result 可能的取值有：true 验证码错误 验证码不能为空 用户名不能为空 用户名已经存在
                if (result == "true") {
                    // 注册成功：跳转到注册成功页面
                    location.href = "register_ok.html";
                } else {
                    $("#msg").html(result);
                }
            },
            error: function () { // 失败回调
                alert("服务器是真的忙哦...");
            }
        });
    });

    // 出生开始日期必须小于结束日期
    function ckdate_date() {
        var startTime = $("#birthday").val();
        var endTime = $("#birthday-end").val();

        var start = new Date(startTime.replace("-", "/").replace("-", "/"));
        var end = new Date(endTime.replace("-", "/").replace("-", "/"));
        if (end < start) {
            alert('结束日期不能小于出生开始日期！');
            return false;
        } else {
            return true;
        }
    }

    <!--校验二个密码是否一致-->
    function checkpassword() {
        var password = document.getElementById("pw").value;
        var repassword = document.getElementById("repw").value;

        if (password == repassword) {
            document.getElementById("tishi").innerHTML = "<br><font color='green'>两次密码输入一致</font>";
            document.getElementById("submit").disabled = false;

        } else {
            document.getElementById("tishi").innerHTML = "<br><font color='red'>两次输入密码不一致!</font>";
            document.getElementById("submit").disabled = true;
        }
    }

</script>
</body>
</html>